<template>
  <el-card shadow="hover" style="height: 100%;" :body-style="{height:'100%','background-image':`linear-gradient(${rgbColor[0]},${rgbColor[1]},${rgbColor[2]})`}">
    <template #header>
      图片主色提取
    </template>
    <img @mouseenter="onMouseenter" src="@/assets/images/bg.jpg" alt="">
    <img class="ml-3" @mouseenter="onMouseenter" src="@/assets/images/傍晚夕阳唯美风景图片壁纸.jpg" alt="">
    <img class="ml-3" @mouseenter="onMouseenter" src="@/assets/images/山峰自然景色唯美意境图片壁纸.jpg" alt="">
    <img class="ml-3" @mouseenter="onMouseenter" src="@/assets/images/日漫风格插画高清壁纸.jpg" alt="">
  </el-card>
</template>
<script setup lang="ts">

import Colorthief from 'colorthief'

const colorthief = new Colorthief()

const rgbColor = shallowRef([])
const onMouseenter = (e:Event) => {
  const color = colorthief.getPalette(e.target,3)
  rgbColor.value = color.map(c => `rgb(${c[0]},${c[1]},${c[2]})`)
}
</script>

<style scoped lang="less">
img{
  width: 250px;
  height: 150px;
}
</style>
